<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表格与表单示例</title>
  <style>
    table {
      border-collapse: collapse;
      width: 60%;
      margin-bottom: 30px;
    }
    th, td {
      border: 1px solid #333;
      padding: 8px 12px;
      text-align: center;
    }
    caption {
      font-weight: bold;
      margin-bottom: 10px;
    }
    fieldset {
      width: 50%;
      padding: 20px;
    }
  </style>
</head>
<body>

<h2>学生成绩表</h2>
<table>
  <caption>课程成绩记录</caption>
  <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>课程</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20230206809</td>
      <td>姚昕杰</td>
      <td>JavaWeb</td>
      <td>100</td>
    </tr>
    <tr>
      <td>20230207325</td>
      <td>姚许浩</td>
      <td>英语</td>
      <td>60</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">说明：数据仅作演示使用</td>
    </tr>
  </tfoot>
</table>

<h2>用户注册表单</h2>
<form action="/register" method="POST" enctype="multipart/form-data">
  <fieldset>
    <legend>注册信息</legend>

    <!-- 用户名输入框 -->
    <label for="user">用户名：</label>
    <input type="text" id="user" name="user" required placeholder="请输入用户名"><br><br>

    <!-- 密码输入框 -->
    <label for="pass">密码：</label>
    <input type="password" id="pass" name="pass" required placeholder="请输入密码"><br><br>

    <!-- 头像上传 -->
    <label for="photo">上传头像：</label>
    <input type="file" id="photo" name="photo" accept="image/*"><br><br>

    <!-- 下拉选择国家 -->
    <label for="nation">选择国家：</label>
    <select id="nation" name="nation">
      <option value="">--请选择国家--</option>
      <option value="japan">日本</option>
      <option value="korea">韩国</option>
      <option value="germany">德国</option>
    </select><br><br>

    <!-- 单选性别 -->
    <label>性别：</label>
    <input type="radio" id="boy" name="sex" value="boy">
    <label for="boy">男</label>
    <input type="radio" id="girl" name="sex" value="girl">
    <label for="girl">女</label><br><br>

    <!-- 多选兴趣 -->
    <label>兴趣爱好：</label>
    <input type="checkbox" id="reading" name="interest" value="reading">
    <label for="reading">阅读</label>
    <input type="checkbox" id="travel" name="interest" value="travel">
    <label for="travel">旅行</label>
    <input type="checkbox" id="gaming" name="interest" value="gaming">
    <label for="gaming">游戏</label><br><br>

    <!-- 个人简介文本域 -->
    <label for="bio">个人简介：</label><br>
    <textarea id="bio" name="bio" rows="5" cols="40" placeholder="简单介绍一下自己..."></textarea><br><br>

    <!-- 提交、重置及普通按钮 -->
    <button type="submit">提交注册</button>
    <button type="reset">重置表单</button>
    <button type="button" onclick="alert('欢迎注册成功！')">普通提示</button>

  </fieldset>
</form>

</body>
</html>
